<template>
  <article class="index__search-block">
    <div class="carousel-view">
      <el-carousel height="534px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <img :src="item.src" alt="图片丢失了" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="search-main">
      <div>
        <h5>演示租户</h5>
        <h2>政务业务数据管理平台</h2>
        <div class="search-way">
          <input v-model="keyword" type="text" placeholder="输入关键字搜索" />
          <button>搜索</button>
        </div>
        <div class="host-list" v-if="hotList.length > 0">
          <ul>
            <li v-for="(item, index) in hotList" :key="index">
              {{ item.val }}
              <img v-if="!index" src="@/assets/img/fire.png" style="height: 16px; width: 16px"/>
            </li>
          </ul>
        </div>
        <div class="block-list" v-if="blockList.length > 0">
          <div
            class="block-item"
            v-for="(item, index) in blockList"
            :key="index"
          >
            <p>
              <span>{{ item.content }}</span>
            </p>
            <h5>{{ item.name }}</h5>
          </div>
        </div>
      </div>
    </div>
  </article>
</template>
<script>
import http from "@/utils/http.js"
export default {
  data() {
    return {
      imgList: [
        {
          src: require("@/assets/img/firstImg.jpg"),
          title: "这是lj.png",
        },
        {
          src: require("@/assets/img/secondImg.png"),
          title: "这是logo.png",
        },
      ],
      hotList: [],
      blockList: [],
    };
  },
  created(){
    this.getQuery();
    this.getWordCloud()
  },
  methods:{
    async getQuery(){
      const res = await http.getQuery();
      if(res.data){
        this.blockList = res.data.data || []
      }
    },
    async getWordCloud(){
      const res = await http.getWordCloud();
      console.log(res.data.data)
      const dataList = res.data.data
      let list=[]
      //后端传来一个枚举类型数据，前端解析放在一个数组里
      for(let i in dataList){
        list.push({
          val : i,
          num : dataList[i]
        })
      }
      list.sort(function (a, b) {
        const x = a.num;
        const y = b.num;
        return y-x;
      });
      this.hotList = list.splice(0,5)
      console.log(this.hotList.length)
    }
    
  }
};
</script>
<style lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.is-active {
  background: none !important;
}

.search-main {
  position: relative;
  z-index: 5;
  width: 80%;
  min-width: 1200px;
  margin: auto;
  padding: 68px 0 0;
  text-align: left;
  h5 {
    font-size: 30px;
    line-height: 30px;
    color: #fff;
  }
  h2 {
    font-size: 46px;
    margin-bottom: 33px;
    color: #fff;
  }
}

.carousel-view {
  position: absolute;
  height: 540px;
  width: 100%;
  top: 0;
  left: 0;
  line-height: 0;
  background-color: #2e43b7;
}

.index__search-block {
  text-align: center;
  height: 540px;
  position: relative;
}

.el-input {
  width: 640px !important;
  height: 50px !important;
  font-size: 20px !important;
}

.search-way {
  float: left;
  height: 50px;
  input {
    width: 640px;
    height: 50px;
    font-size: 20px;
    outline: none;
  }
  button {
    background: #4862fe;
    text-align: center;
    font-size: 20px;
    color: #fff;
    width: 100px;
    height: 50px;
    border: none;
  }
}

.host-list {
  padding: 10px 0;
  position: absolute;
  text-align: center;
  display: flex;
  margin-top: 60px;
  ul {
    display: inline-block;
  }
  li {
    list-style: none;
    line-height: 24px;
    margin-right: 15px;
    color: #fff;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;

    &:hover {
      border-radius: 5px;
      background-color: #777777;
    }

    img {
      height: 16px;
      width: 16px;
    }
  }
}

.block-list {
  margin-top: 170px;
  width: 100%;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: center;
  .block-item {
    padding-top: 15px;
    background-color: hsla(0, 0%, 100%, 0.1);
    width: 186px;
    height: 120px;
    float: left;
    text-align: center;
    border-left: 1px solid #3a2d9d;
    &:hover {
      background-color: hsla(0, 0%, 100%, 0.2);
      span {
        color: #53eeffff;
      }
      h5 {
        color: #67f0ffff;
      }
    }
    span {
      font-size: 32px;
      color: white;
    }
    h5 {
      font-size: 19px;
      color: #ffffff;
    }
  }
}
</style>
